<script>
import axios from "axios";
import {getBaseUrl} from "@/js/common.js";
import MyBlogItem from "@/components/user/MyBlogItem.vue";
import TextEditDrawer from "@/components/user/TextEditDrawer.vue";
import BlogInfoDialog from "@/components/user/BlogInfoDialog.vue";

export default {
  name: "MyBlogPage",
  components: {BlogInfoDialog, TextEditDrawer, MyBlogItem },
  data(){
    return {
      dataList: [],
      current: 1,
      size: 12,
      total: 0,
      title: '',
      menuPosition: { x: 0, y: 0 },
      pagePosition: { x: 0, y: 0 },
      showMenu: false,
      showPage: false,
      currentOptBlog: {},
      componentOffset: { top: 0, left: 0 },
      drawer: false
    }
  },
  mounted() {
    this.calculateComponentOffset();
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.calculateComponentOffset)
    this.getDataList()
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('resize', this.calculateComponentOffset);
  },
  watch: {
    current(){
      this.getDataList()
    }
  },
  methods: {
    getDataList(){
      axios.post(getBaseUrl('blogHandle') + '/blog/pageMyCatalog', {
        current: this.current,
        size: this.size,
        blogTitle: this.title
      }, {headers: {massToken: sessionStorage.getItem('massToken')}}).then(res => {
        this.dataList = res.data.data.records
        this.total = res.data.data.total
      })
    },
    showContextMenu(event, blog) {
      console.log(event,blog)
      this.menuPosition = { x: event.clientX, y: event.clientY }
      this.showPage = false
      this.showMenu = true
      this.currentOptBlog = blog
    },
    calculateComponentOffset() {
      const rect = this.$el.getBoundingClientRect();
      this.componentOffset = { top: rect.top, left: rect.left };
    },
    handleScroll() {
      if (this.showMenu) {
        this.updateMenuPosition();
      }
      this.calculateComponentOffset();
    },
    updateMenuPosition() {
      const rect = this.$el.getBoundingClientRect();
      this.menuPosition = {
        x: this.menuPosition.x + (rect.left - this.componentOffset.left),
        y: this.menuPosition.y + (rect.top - this.componentOffset.top)
      };
    },
    update(entity){
      axios.post(getBaseUrl('blogHandle') + '/blog/update', entity, {headers: {massToken: sessionStorage.getItem('massToken')}}).then(res => {
        if (res.data.code === 200){
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.showMenu = false
          this.getDataList()
        }
      })
    },
    showPageMenu(event){
      event.preventDefault(); // 阻止默认的右键菜单显示
      this.pagePosition = { x: event.clientX, y: event.clientY }
      if (!this.showMenu)this.showPage = true
    },
    newBlog(){
      axios.post(getBaseUrl('blogHandle') + '/blog/add', {
        title: '新建内容',
        cover: '',
        content: ''
      }, {headers: {massToken: sessionStorage.getItem('massToken')}}).then(res => {
        if (res.data.code === 200){
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.showPage = false
          this.getDataList()
        }
      })
    }
  }
}
</script>

<template>
  <div class="home-content" @contextmenu="showPageMenu">
    <div v-if="dataList.length > 0">
      <el-row v-for="rowIndex in Math.ceil(dataList.length/3)" :key="rowIndex">
        <el-col v-for="colIndex in 3" :key="colIndex" span="8" style="padding: 30px">
          <MyBlogItem v-if="(rowIndex-1)*3+colIndex-1 < dataList.length"  :blog="dataList[(rowIndex-1)*3+colIndex-1]" @show-context-menu="showContextMenu" />
        </el-col>
      </el-row>
      <div style="display: flex;justify-content: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-model:current-page="current"
        />
      </div>
    </div>
    <div
      v-if="showMenu"
      class="context-menu"
      :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }"
    >
      <div v-if="currentOptBlog.isRelease === 1" class="menu-item" @click.stop="update({id: currentOptBlog.id, isRelease: 0})">取消发布</div>
      <div v-else class="menu-item" @click.stop="update({id: currentOptBlog.id, isRelease: 1})">发布</div>
      <div class="menu-item" @click.stop="this.$refs.blogInfoDialog.dialogVisible = true">基本信息</div>
      <div class="menu-item" @click.stop="this.$refs.textEditDrawer.drawer = true">编辑</div>
      <div class="menu-item" @click.stop="update({id: currentOptBlog.id, dealFlag: 1})">删除</div>
      <div class="menu-item" @click.stop="this.showMenu = false">取消</div>
    </div>
    <div
      v-if="showPage"
      class="context-menu"
      :style="{ top: `${pagePosition.y}px`, left: `${pagePosition.x}px` }"
    >
      <div class="menu-item" @click.stop="newBlog">新增</div>
      <div class="menu-item" @click.stop="this.showPage = false">取消</div>
    </div>
    <div>
      <TextEditDrawer ref="textEditDrawer" :blog="currentOptBlog" />
      <BlogInfoDialog ref="blogInfoDialog" :blog="currentOptBlog" />
    </div>
  </div>
</template>

<style scoped>
.home-content{
  display: flex;
  justify-content: center;
}
.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 5px 0;
}
.menu-item {
  padding: 8px 16px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #f0f0f0;
}
</style>
